<template>
	<div class="app-container">
		<div class="details">
			<div class="detailsDiv">
				<div class="dialogDom" v-if="detailsInfo.dataType != 'comment' && detailsInfo.dataType != 'commentReply'">
					<div><span>作者ID:</span>{{ detailsInfo.author?.id }}</div>
					<div><span>作者昵称:</span>{{ detailsInfo.author?.nikename }}</div>
					<div><span>作者实名状态:</span>{{ detailsInfo.realStatus == null ? '未认证' : detailsInfo.realStatus }}</div>
					<div><span>发布IP:</span>{{ detailsInfo.publisherIp }}</div>
					<div><span>发布手机型号:</span>-</div>
				</div>
			</div>

			<div class="detailsDiv">
				<div class="dialogDom">
					<div><span>审核人:</span> {{ detailsInfo.auditor }}</div>
					<div><span>发布时间: </span>{{ formatTimestamp(parseInt(detailsInfo.publishTime)) }}</div>
					<div><span>自动评估风险等级:</span> {{ detailsInfo.tagDesc }}</div>
				</div>
			</div>
			<div class="detailsDiv">
				<div>
					<div class="dialogDiv">
						<span>视频ID:</span>
						<div class="dialogDivCon">{{ detailsInfo.id }}</div>
					</div>
					<div class="dialogDiv">
						<span>视频标题:</span>
						<div class="dialogDivCon">{{ detailsInfo.title }}</div>
					</div>
					<div class="dialogDiv">
						<span>视频标签:</span>
						<div class="dialogDivCon">{{ detailsInfo.tags }}</div>
					</div>
					<div class="dialogDiv">
						<span>视频链接:</span>
						<div class="dialogDivCon">
							<a :href="detailsInfo.link || detailsInfo.h5Url || detailsInfo.playUrl" target="_blank">
								{{ detailsInfo.link || detailsInfo.h5Url || detailsInfo.playUrl
								}}</a>
						</div>
					</div>
					<div class="dialogDiv" v-if="detailsInfo.dataType == 'article'">
						<span>内容:</span>
						<div class="dialogDivCon" v-html="detailsInfo.content"></div>
					</div>
					<div class="dialogDiv" v-if="detailsInfo.dataType == 'comment' || detailsInfo.dataType == 'commentReply'">
						<span>评论内容:</span>
						<div class="dialogDivCon" v-html="detailsInfo.commentContent"></div>
					</div>
				</div>
			</div>
			<div class="detailsDiv">
				<div class="dialogDom"><span>视频或图片：</span></div>
				<div v-for="(item, index) in detailsInfo.imgPics" class="imgPics">
					<img :src="item" />
				</div>
				<div v-if="detailsInfo.playInfo" v-for="(item, index) in detailsInfo.playInfo" class="imgPics">
					<video :src="item.playUrl" controls></video>
				</div>
				<div v-else class="imgPics">
					<video :src="detailsInfo.playUrl" controls></video>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { videoDetail } from '/@/api/admin/content';
import { useMessage } from '/@/hooks/message';
import moment from 'moment';
export default {
	name: 'shortVideoDetails',
	props: {
		id: {
			type: String,
			default: function (e) {
				return '';
			},
		},
		userId: {
			type: String,
			default: function (e) {
				return '';
			},
		},
	},
	data() {
		return {
			outerVisible: false,
			options: [],
			// 遮罩层
			loading: true,
			// 总条数
			total: 0,
			// 表格数据
			list: [],
			pageNum: 1,
			pageSize: 10,
			// 查询参数
			detailsInfo: {},
			queryParams: {
				ipaddr: undefined,
				userName: undefined,
			},
		};
	},

	created() {
		this.videoDetail();
	},
	methods: {
		formatTimestamp(timestamp) {
			return moment(timestamp).format('YYYY-MM-DD hh:ss:mm'); // 注意：同上，如果是秒则需要乘以1000
		},
		videoDetail() {
			let data = {
				id: this.$route.query.id,
				userId: this.$route.query.userId,
			};
			videoDetail(data).then((res) => {
				this.detailsInfo = res.data;
			});
		},
	},
};
</script>
<style lang="scss" scoped>
.details {
	font-size: 14px;
	color: #666;
	width: 98%;
	margin: 1% auto;
}

.detailsDiv {
	border-bottom: 1px solid #e3e3e3;
	margin-bottom: 0.5%;
	padding: 10px 20px;
	background-color: #fff;
	font-size: 16px;
}

.dialogDom {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	text-align: left;
	margin: 15px 0;
	color: #999;
	flex-wrap: wrap;

	span {
		color: #333;
		margin-right: 10px;
	}

	>div {
		width: 20%;
		min-width: 200px;
	}
}

.dialogDiv {
	margin: 15px 0;
	color: #999;
	margin: 15px 0;
	color: #999;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;

	.dialogDivCon {
		width: 70%;

		a {
			text-decoration: underline;
		}
	}

	span {
		color: #333;
		margin-right: 10px;
	}
}

.imgPics {
	width: 18%;
	display: inline-block;
	margin: 1%;
	min-width: 300px;

	img {
		width: 100%;
		display: block;
	}
}
</style>
